<!--
 * @Author: daidai
 * @Date: 2022-03-01 14:13:04
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-27 15:04:49
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-top.vue
-->
<template>
  <Echart
    v-if="pageflag"
    id="rightTop"
    ref="charts"
    :options="option"
    class="right_top_inner"
  />
  <Reacquire v-else style="line-height: 200px" @onclick="getData">
    重新获取
  </Reacquire>
</template>

<script>
import { graphic } from "echarts";
import { alarmCount } from "@/api";

export default {
  data() {
    return {
      option: {},
      pageflag: false,
      timer: null
    };
  },
  created() {

  },

  mounted() {
    this.getData();
  },
  unmounted() {
    console.log("right-top unmounted");
    this.clearData();
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      this.pageflag = true;
      // this.pageflag =false
      alarmCount().then((res) => {
        if (!this.timer) {
        }
        this.$nextTick(() => {
          this.init(res.data.dateList, res.data.numList),
            this.switper();
        });
      });
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      // this.timer = setInterval(
      //   looper,
      //   10000
      // );
      let myChart = this.$refs.charts.chart;
      myChart.on("mouseover", (params) => {
        this.clearData();
      });
      myChart.on("mouseout", (params) => {
        // this.timer = setInterval(
        //   looper,
        //   3000
        // );
      });
    },
    init(xData, yData) {
      this.option = {
        xAxis: {
          type: "category",
          data: xData,
          boundaryGap: false, // 不留白，从原点开始
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(31,99,163,.2)"
            }
          },
          axisLine: {
            // show:false,
            lineStyle: {
              color: "rgba(31,99,163,.1)"
            }
          },
          axisLabel: {
            color: "#7EB7FD",
            fontWeight: "500"
          }
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(31,99,163,.2)"
            }
          },
          axisLine: {
            lineStyle: {
              color: "rgba(31,99,163,.1)"
            }
          },
          axisLabel: {
            color: "#7EB7FD",
            fontWeight: "500"
          }
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF"
          },
          formatter: "{b}: {c}" // 格式化工具提示框内容
        },
        grid: {
          //布局
          show: true,
          left: "10px",
          right: "30px",
          bottom: "10px",
          top: "28px",
          containLabel: true,
          borderColor: "#1F63A3"
        },
        series: [
          {
            data: yData,
            type: "line",
            smooth: true,
            symbol: "none", //去除点
            name: "报警次数",
            color: "rgba(252,144,16,.7)",
            areaStyle: {
              //右，下，左，上
              color: new graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(252,144,16,.7)"
                  },
                  {
                    offset: 1,
                    color: "rgba(252,144,16,.0)"
                  }
                ],
                false
              )
            },
            markPoint: {
              data: [
                {
                  name: "最大值",
                  type: "max",
                  valueDim: "y",
                  symbol: "rect",
                  symbolSize: [60, 26],
                  symbolOffset: [0, -20],
                  itemStyle: {
                    color: "rgba(0,0,0,0)"
                  },
                  label: {
                    color: "#FC9010",
                    backgroundColor: "rgba(252,144,16,0.1)",
                    borderRadius: 6,
                    padding: [7, 14],
                    borderWidth: 0.5,
                    borderColor: "rgba(252,144,16,.5)",
                    formatter: "报警：{c}"
                  }
                },
                {
                  name: "最大值",
                  type: "max",
                  valueDim: "y",
                  symbol: "circle",
                  symbolSize: 6,
                  itemStyle: {
                    color: "#FC9010",
                    shadowColor: "#FC9010",
                    shadowBlur: 8
                  },
                  label: {
                    formatter: ""
                  }
                }
              ]
            }
          },
        ]
      };
    }
  }
};
</script>
<style lang='scss' scoped>
.right_top_inner {
  margin-top: -8px;
}
</style>